<template>
	<view class="reset-container">
        <u-gap height="40" bg-color="#FFFFFF"></u-gap>
        <view class="reset-view">
            <view class="form-view" v-if="step === 1">
                <u-form :model="validAccountForm" ref="validAccountForm">
                    <u-form-item label-position="top">
                        <u-input v-model="validAccountForm.account" placeholder="请输入账户名" />
                    </u-form-item>
                    <u-form-item label-position="top">
                        <u-input v-model="validAccountForm.img_code" placeholder="请输入图片验证码" maxlength="4"/>
                        <u-image slot="right" width="120" height="60" :src="captcha_url" @click="handleChangeCaptchalUrl" ></u-image>
                    </u-form-item>
                </u-form>
                <u-button :disabled="val_disabled_account" class="u-m-20" type="error" shape="circle" @click="handleValidAccount">验证账户</u-button>
            </view>
            <view class="form-view" v-if="step === 2">
                <u-form :model="validMobileForm" ref="validMobileForm">
                    <u-form-item label-position="top">
                        <u-input v-model="validMobileForm.mobile" disabled maxlength="11"/>
                    </u-form-item>
                    <u-form-item label-position="top">
                        <u-input v-model="validMobileForm.img_code" placeholder="请输入图片验证码" maxlength="4"/>
                        <u-image slot="right" width="120" height="60" :src="captcha_url" @click="handleChangeCaptchalUrl" ></u-image>
                    </u-form-item>
                    <u-form-item label-position="top">
                        <u-input v-model="validMobileForm.sms_code" placeholder="请输入短信验证码" maxlength="6"/>
                        <u-button slot="right" type="error" size="mini" @click="handleCode">{{codeTips}}</u-button>
                        <u-verification-code seconds="60" ref="uCode" @change="handleCodeChange"></u-verification-code>
                    </u-form-item>
                </u-form>
                <u-button :disabled="val_disabled_mobile" class="u-m-20" type="error" shape="circle" @click="handleNextStep">下一步</u-button>
            </view>
            <view class="form-view" v-if="step === 3">
                <u-form :model="changePasswordForm" ref="changePasswordForm">
                    <u-form-item label-position="top">
                        <u-input v-model="changePasswordForm.password" type="password" placeholder="请输入密码" maxlength="20"/>
                    </u-form-item>
                    <u-form-item label-position="top">
                        <u-input v-model="changePasswordForm.rep_password" type="password" placeholder="请确认密码" maxlength="20"/>
                    </u-form-item>
                </u-form>
                <u-button :disabled="val_disabled_password" class="u-m-20" type="error" shape="circle" @click="submitChangeForm">确认修改</u-button>
            </view>
        </view>
	</view>
</template>

<script>
    import * as API_Common from '@/api/common.js';
    import * as API_Passport from '@/api/passport.js';
    import Cache,{Keys} from '@/utils/cache.js';
    export default {
        data() {
          return {
              uuid: Cache.getItem('uuid'),
              step: 1,
              validAccountForm: {
                  account: '',
                  img_code: ''
              }, // 校验账户信息 表单
              validMobileForm: {
                  mobile: '',
                  img_code: '',
                  sms_code: ''
              }, //校验手机 表单
              changePasswordForm: {
                  password: '',
                  rep_password: ''
              },//修改密码 表单
              captcha_url: '', //图片验证码
              codeTips: '获取验证码'
          };
        },
        computed: {
            // 验证账户按钮 按钮是否禁用
            val_disabled_account() {
                const { account, img_code } = this.validAccountForm
                return !(account && img_code)
            },
            // 验证手机号 按钮是否禁用
            val_disabled_mobile() {
                const { img_code, sms_code } = this.validMobileForm
                return !(img_code && sms_code)
            },
            // 确认修改密码 按钮是否禁用
            val_disabled_password() {
                const { password, rep_password } = this.changePasswordForm
                return (!password || !rep_password) || (password !== rep_password)
            }
        },
        onLoad() {
            this.handleChangeCaptchalUrl()
        },
        methods: {
            // 获取图片验证码
            handleChangeCaptchalUrl() {
                const uuid = this.step === 1 ? this.uuid : this.validMobileForm.uuid
                this.captcha_url = API_Common.getValidateCodeUrl(uuid, 'FIND_PASSWORD')
            },
            // 验证账户
            handleValidAccount() {
                const { uuid } = this
                const { account, img_code } = this.validAccountForm
                API_Passport.validAccount(uuid, img_code, account,'FIND_PASSWORD').then((response) => {
                    this.validMobileForm.mobile = response.mobile
                    this.validMobileForm.uname = response.uname
                    this.validMobileForm.uuid = response.uuid
                    this.step = 2
                    this.handleChangeCaptchalUrl()
                }).catch(this.handleChangeCaptchalUrl)
            },
            // 获取短信验证码
            handleCode() {
                const { uuid, img_code } = this.validMobileForm
                if (!img_code) {
                    this.$u.toast('请输入图片验证码')
                    return
                } else {
                    if(this.$refs.uCode.canGetCode) {
                    	// 向后端请求验证码
                    	API_Passport.sendFindPasswordSms(uuid, img_code, 'FIND_PASSWORD').then(res => {
                    	    this.$u.toast('验证码已发送')
                            // 通知验证码组件内部开始倒计时
                            this.$refs.uCode.start()
                    	}).catch(this.handleChangeCaptchalUrl)
                    } else {
                    	this.$u.toast('倒计时结束后再发送')
                    }
                }
            },
            //验证码发生变化时
            handleCodeChange(text) {
            	this.codeTips = text;
            },
            //下一步 验证短信验证码
            handleNextStep() {
                const { uuid, sms_code } = this.validMobileForm
                API_Passport.validFindPasswordSms(uuid, sms_code).then(() => {
                    this.step = 3
                    this.handleChangeCaptchalUrl()
                }).catch(this.handleChangeCaptchalUrl)
            },
            //找回密码
            submitChangeForm() {
                const { uuid } = this.validMobileForm
                const { password } = this.changePasswordForm
                API_Passport.changePassword(uuid, password).then(() => {
                    this.$u.toast('密码找回成功，请牢记您的新密码')
                    uni.navigateBack()
                }).catch(this.handleChangeCaptchalUrl)
            }
        }
	}
</script>

<style lang="scss" scoped>
    .reset-container {
        .reset-view {
            background-color: #FFFFFF;
            margin: 30rpx;
            border-radius: 20rpx;
            padding: 20rpx 40rpx;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }
    }
</style>
